<template>
	<view>
		<form @submit.stop="formSubmit">
			<view class="container">
				<!-- 产权人 -->
				<view class="property-right-person">
					<view class=" customer-info-title flex-align">
						<view class="line"></view>
						<view class="info-title-text">产权人</view>
					</view>
					<view class="info-item flex-space">
						<text class="info-item-text">姓名 <text class="tagging">*</text> </text>
						<input name="ownerName" v-model="formData.ownerName" class="info-item-input" type="text"
							placeholder="请输入姓名"></input>
					</view>
				</view>
				<!-- 房屋信息 -->
				<view class="hous-info property-right-person">
					<view class=" customer-info-title flex-align">
						<view class="line"></view>
						<view class="info-title-text">房屋信息</view>
					</view>
					<view class="info-item flex-space">
						<text class="info-item-text">小区名 <text class="tagging">*</text></text>
						<input name="estateName" v-model="formData.estateName" class="info-item-input" type="text"
							placeholder="请输入小区名"></input>
					</view>
					<view class="info-item flex-space">
						<text class="info-item-text">房屋新旧</text>
						<input name="oldNew" v-model="formData.oldNew" class="info-item-input" type="text"
							placeholder="请输入房屋新旧"></input>
					</view>
					<view class="info-item flex-space">
						<text class="info-item-text">建筑梯户数</text>
						<input name="houseHolds" v-model="formData.houseHolds" class="info-item-input" type="text"
							placeholder="请输入建筑梯户数"></input>
					</view>
					<view class="info-item-box">
						<text class="info-item-text">房屋楼层</text>
						<textarea name="houseFloor" v-model="formData.houseFloor" class="info-item-textarea"
							placeholder="请输入房屋楼层的描述" id="" cols="30" rows="10"></textarea>
					</view>
					<view class="info-item flex-space">
						<text class="info-item-text">物业费</text>
						<view class="flex-align">
							<input name="propertyFee" v-model="formData.propertyFee" class="info-item-input"
								type="digit" placeholder="请输入物业费"></input>
							<text class="info-item-val">（元/平方米）</text>
						</view>
					</view>
					<view class="info-item flex-space">
						<text class="info-item-text">房屋建筑面积</text>
						<view class="flex-align">
							<input name="area" v-model="formData.area" class="info-item-input" type="digit"
								placeholder="请输入建筑面积"></input>
							<text class="info-item-val">（平方米）</text>
						</view>
					</view>
					<view class="info-item flex-space">
						<text class="info-item-text">房屋架构</text>
						<input name="structure" v-model="formData.structure" class="info-item-input" type="text"
							placeholder="请输入房屋架构"></input>
					</view>
					<view class="info-item-box">
						<text class="info-item-text">房屋户型</text>
						<textarea name="model" v-model="formData.model" class="info-item-textarea"
							placeholder="请输入房屋户型的描述" id="" cols="30" rows="10"></textarea>
					</view>
					<view class="info-item flex-space">
						<text class="info-item-text">建成年限</text>
						<view class="flex-align">
							<input class="info-item-input" v-model="formData.age" name="age" type="number"
								placeholder="请输入建成年限"></input>
							<text class="info-item-val">（年）</text>
						</view>
					</view>
					<view class="info-item flex-space">
						<text class="info-item-text">房屋当前状态</text>
						<input name="state" class="info-item-input" type="text" placeholder="请输入房屋当前状态"></input>
					</view>
					<view class="info-item flex-space">
						<text class="info-item-text">贝壳网咨询</text>
						<input name="conch" v-model="formData.conch" class="info-item-input" type="text"
							placeholder="请输入贝壳网咨询总价"></input>
					</view>
					<view class="info-item flex-space">
						<text class="info-item-text">客户有无车库</text>
						<input name="carport" v-model="formData.carport" class="info-item-input" type="text"
							placeholder="请输入客户有无车库"></input>
					</view>
					<view class="info-item-box">
						<text class="info-item-text">特别说明</text>
						<textarea name="especially" v-model="formData.especially" class="info-item-textarea"
							placeholder="房屋结构改动等情况" id="" cols="30" rows="10"></textarea>
					</view>
					<view class="info-item-box">
						<text class="info-item-text">房屋配套</text>
						<textarea name="ancillary" v-model="formData.ancillary" class="info-item-textarea"
							placeholder="请输入房屋结构改动等情况" id="" cols="30" rows="10"></textarea>
					</view>
				</view>
				<!-- 借款信息 -->
				<view class="borrowing-info">
					<view class=" customer-info-title flex-align">
						<view class="line"></view>
						<view class="info-title-text">借款信息</view>
					</view>
					<view class="info-item-box">
						<text class="info-item-text">借款用途</text>
						<textarea name="purpose" v-model="formData.purpose" class="info-item-textarea"
							placeholder="请输入借款用途" id="" cols="30" rows="10"></textarea>
					</view>
					<view class="info-item-box">
						<text class="info-item-text">客户还款来源</text>
						<textarea name="source" v-model="formData.source" class="info-item-textarea"
							placeholder="请输入客户还款来源" id="" cols="30" rows="10"></textarea>
					</view>
					<!-- 下载 -->
					<button class="dowload flex-center" formType="submit">
						<!-- <image src="/images/index/dowload-icon.png" class="dowload-icon"></image> -->
						<text>保存</text>
					</button>
				</view>
			</view>

		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				formData: {},
			}
		},
		onLoad: function(options) {

			this.id = options.id;
			if (this.id) {
				this.getSurveyDataBySid();
			}

		},
		methods: {
			//获取基本信息
			getSurveyDataBySid() {
				this.$api.getSurveyDataBySid({
					sid: this.id
				}).then(res => {
					this.formData = res.data.data

				})
			},
			//下一步
			async formSubmit(e) {
				let data = e.detail.value;
				data.sid = +this.id;
				data.id = this.formData ? +this.formData.id : '';
				this.formData = data
				this.$api.addSurveyData(this.formData).then(res => {
					uni.navigateBack({
						delta: 1,
					})
				})
			},
		},
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.container {
		padding: 40rpx 30rpx;
	}

	.property-right-person {
		margin-bottom: 42rpx;
	}

	.customer-info-title {
		margin-bottom: 20rpx;
	}

	.line {
		width: 8rpx;
		height: 28rpx;
		background: #585CF7;
		border-radius: 4rpx;
		margin-right: 13rpx;
	}

	.info-title-text {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}

	.info-item {
		height: 110rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.info-item-text {
		font-size: 30rpx;
		color: #333333;
	}

	.info-item-val {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}

	.info-item-input {
		text-align: right;
		font-size: 30rpx;
	}

	.info-item-box {
		padding: 40rpx 0 10rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.info-item-textarea {
		margin-top: 50rpx;
		height: 70px;
	}

	.dowload {
		height: 98rpx;
		background: #585CF7;
		border-radius: 49rpx;
		width: 100%;
		margin-right: 6rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		margin-top: 60rpx;
	}

	.dowload-icon {
		width: 46rpx;
		height: 34rpx;

	}

	.divider {
		width: 100%;
		height: 20rpx;
		background: #F8F8F8;
	}

	.file-upload-title {
		font-size: 30rpx;
		color: #333333;
		margin-bottom: 40rpx;
	}

	.img-box {}

	.img-item {
		position: relative;
		margin-right: 30rpx;
		width: calc((100% - 90rpx)/3);
		height: 210rpx;
		margin-bottom: 30rpx;
		display: inline-block;
	}

	.img-item:nth-child(3n) {
		margin-right: 0;
	}

	.img-item-img {
		width: 100%;
		height: 210rpx;
		border-radius: 10px;
		margin-bottom: 30rpx;
	}

	.add-video {
		width: 100%;
		height: 300rpx;
		border-radius: 10px;
	}



	.img-close {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: -5px;
		right: -8px;
	}

	.submit {
		width: 100%;
		height: 98rpx;
		background: #585CF7;
		border-radius: 49rpx;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 98rpx;
		text-align: center;
		margin-top: 30rpx;
	}

	.tagging {
		color: #f00;
	}
</style>
